<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="UTF-8">
  <title>Segment - Custom</title>
  <meta name="viewport"
    content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
  <link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
  <script src="../../../../../scripts/testing/scripts.js"></script>
  <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
  <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
</head>

<body>
  <ion-app>
    <ion-header>
      <ion-toolbar>
        <ion-segment value="Free" id="custom-radius">
          <ion-segment-button value="Paid">
            <ion-label>Paid</ion-label>
          </ion-segment-button>
          <ion-segment-button value="Free">
            <ion-label>Free</ion-label>
          </ion-segment-button>
          <ion-segment-button value="Top">
            <ion-label>Top</ion-label>
          </ion-segment-button>
        </ion-segment>
      </ion-toolbar>

      <ion-toolbar>
        <ion-segment value="Free" class="custom-checked">
          <ion-segment-button value="Paid">
            <ion-label>Paid</ion-label>
          </ion-segment-button>
          <ion-segment-button value="Free">
            <ion-label>Free</ion-label>
          </ion-segment-button>
          <ion-segment-button value="Top">
            <ion-label>Top</ion-label>
          </ion-segment-button>
        </ion-segment>
      </ion-toolbar>

      <ion-toolbar>
        <ion-segment class="custom-icon" value="instagram">
          <ion-segment-button class="segment-button-facebook" value="facebook">
            <ion-label>Facebook</ion-label>
            <ion-icon name="logo-facebook"></ion-icon>
          </ion-segment-button>
          <ion-segment-button class="segment-button-instagram" value="instagram">
            <ion-label>Instagram</ion-label>
            <ion-icon name="logo-instagram"></ion-icon>
          </ion-segment-button>
          <ion-segment-button class="segment-button-slack" value="slack">
            <ion-label>Slack</ion-label>
            <ion-icon name="logo-slack"></ion-icon>
          </ion-segment-button>
        </ion-segment>
      </ion-toolbar>

      <ion-toolbar class="themed">
        <ion-segment value="delete">
          <ion-segment-button value="create">
            <ion-label>Create</ion-label>
            <ion-icon name="create"></ion-icon>
          </ion-segment-button>
          <ion-segment-button value="delete">
            <ion-label>Delete</ion-label>
            <ion-icon name="trash"></ion-icon>
          </ion-segment-button>
          <ion-segment-button value="upload">
            <ion-label>Upload</ion-label>
            <ion-icon name="cloud-upload"></ion-icon>
          </ion-segment-button>
        </ion-segment>
      </ion-toolbar>

      <ion-toolbar>
        <ion-segment class="custom-states-color" value="disabled">
          <ion-segment-button value="inactive">
            <ion-label>Inactive</ion-label>
          </ion-segment-button>
          <ion-segment-button value="inactive2">
            <ion-label>Inactive</ion-label>
          </ion-segment-button>
          <ion-segment-button value="disabled" disabled>
            <ion-label>Disabled</ion-label>
          </ion-segment-button>
        </ion-segment>
      </ion-toolbar>

      <ion-toolbar>
        <ion-segment class="custom-states-background" value="checked">
          <ion-segment-button value="checked">
            <ion-label>Checked</ion-label>
          </ion-segment-button>
          <ion-segment-button value="inactive">
            <ion-label>Inactive</ion-label>
          </ion-segment-button>
          <ion-segment-button value="disabled" disabled>
            <ion-label>Disabled</ion-label>
          </ion-segment-button>
        </ion-segment>
      </ion-toolbar>

      <ion-toolbar>
        <ion-segment class="custom-color" value="dining">
          <ion-segment-button value="dining">
            <ion-label>Dining</ion-label>
            <ion-icon name="cafe"></ion-icon>
          </ion-segment-button>
          <ion-segment-button value="travel">
            <ion-label>Travel</ion-label>
            <ion-icon name="airplane"></ion-icon>
          </ion-segment-button>
          <ion-segment-button value="entertainment">
            <ion-label>Entertainment</ion-label>
            <ion-icon name="radio"></ion-icon>
          </ion-segment-button>
        </ion-segment>
      </ion-toolbar>

      <ion-toolbar>
        <ion-segment class="custom-color" color="danger" value="dining">
          <ion-segment-button value="dining">
            <ion-label>Dining</ion-label>
            <ion-icon name="cafe"></ion-icon>
          </ion-segment-button>
          <ion-segment-button value="travel">
            <ion-label>Travel</ion-label>
            <ion-icon name="airplane"></ion-icon>
          </ion-segment-button>
          <ion-segment-button value="entertainment">
            <ion-label>Entertainment</ion-label>
            <ion-icon name="radio"></ion-icon>
          </ion-segment-button>
        </ion-segment>
      </ion-toolbar>
    </ion-header>

    <ion-content class="ion-padding-top">

      <ion-segment class="custom-active" value="active">
        <ion-segment-button value="active">
          <ion-label>Active</ion-label>
        </ion-segment-button>
        <ion-segment-button value="disabled" disabled="true">
          <ion-label>Disabled</ion-label>
        </ion-segment-button>
        <ion-segment-button value="inactive" disabled="false">
          <ion-label>Inactive</ion-label>
        </ion-segment-button>
      </ion-segment>

      <ion-segment class="custom-icon" value="slack">
        <ion-segment-button class="segment-button-facebook" value="facebook">
          <ion-label>Facebook</ion-label>
          <ion-icon name="logo-facebook"></ion-icon>
        </ion-segment-button>
        <ion-segment-button class="segment-button-instagram" value="instagram">
          <ion-label>Instagram</ion-label>
          <ion-icon name="logo-instagram"></ion-icon>
        </ion-segment-button>
        <ion-segment-button class="segment-button-slack" value="slack">
          <ion-label>Slack</ion-label>
          <ion-icon name="logo-slack"></ion-icon>
        </ion-segment-button>
      </ion-segment>

      <ion-segment class="custom-color" value="dining">
        <ion-segment-button value="dining">
          <ion-label>Dining</ion-label>
          <ion-icon name="cafe"></ion-icon>
        </ion-segment-button>
        <ion-segment-button value="travel">
          <ion-label>Travel</ion-label>
          <ion-icon name="airplane"></ion-icon>
        </ion-segment-button>
        <ion-segment-button value="entertainment">
          <ion-label>Entertainment</ion-label>
          <ion-icon name="radio"></ion-icon>
        </ion-segment-button>
      </ion-segment>

      <ion-segment class="custom-color" color="danger" value="dining">
        <ion-segment-button value="dining">
          <ion-label>Dining</ion-label>
          <ion-icon name="cafe"></ion-icon>
        </ion-segment-button>
        <ion-segment-button value="travel">
          <ion-label>Travel</ion-label>
          <ion-icon name="airplane"></ion-icon>
        </ion-segment-button>
        <ion-segment-button value="entertainment">
          <ion-label>Entertainment</ion-label>
          <ion-icon name="radio"></ion-icon>
        </ion-segment-button>
      </ion-segment>

      <ion-segment class="custom-states-color" value="checked">
        <ion-segment-button value="checked">
          <ion-label>Checked</ion-label>
        </ion-segment-button>
        <ion-segment-button value="inactive">
          <ion-label>Inactive</ion-label>
        </ion-segment-button>
        <ion-segment-button value="disabled" disabled>
          <ion-label>Disabled</ion-label>
        </ion-segment-button>
      </ion-segment>

      <ion-segment class="custom-states-background" value="checked">
        <ion-segment-button value="checked">
          <ion-label>Checked</ion-label>
        </ion-segment-button>
        <ion-segment-button value="inactive">
          <ion-label>Inactive</ion-label>
        </ion-segment-button>
        <ion-segment-button value="disabled" disabled>
          <ion-label>Disabled</ion-label>
        </ion-segment-button>
      </ion-segment>

    </ion-content>
  </ion-app>

</body>

<style>
  body {
    margin: 0;
  }

  ion-segment {
    margin-bottom: 10px;
  }

  ion-toolbar ion-segment {
    margin-bottom: 0;
  }

  #custom-radius ion-segment-button {
    --background: rgba(0, 0, 255, 0.1);
    --background-checked: rgba(0, 0, 255, 0.3);
    --border-radius: 10px;
  }

  /*
   * Custom Checked Segment (Paid, Free, Top)
   *
   * This tests that the colors are able to be overridden on
   * a segment inside of a toolbar
   *
   * Ripple color can be set on ion-segment
   *
   * Backgrounds / colors for the button must be set on the
   * ion-segment-button
   */
  .custom-checked {
    --ripple-color: purple;
  }

  .ios .custom-checked ion-segment-button {
    --color-checked: magenta;
    --indicator-color: red;
    --indicator-height: 50%;
  }

  .md .custom-checked ion-segment-button {
    --background-hover: rgba(17, 228, 10, 0.5);
    --color-checked: purple;
    --color-hover: blue;
    --indicator-color: red;
    --indicator-height: 5px;
  }

  /*
   * Custom Themed Segment (Themed to Primary)
   */
  .themed {
    --ion-toolbar-background: #3880ff;
    --ion-toolbar-color: #fff;

    /* Segment */
    --ion-toolbar-segment-indicator-color: #ffffff;
  }

  /* Material Design Segment */
  .md .themed {
    --ion-toolbar-segment-color: rgba(255, 255, 255, .6);
    --ion-toolbar-segment-color-checked: #ffffff;
    --ion-toolbar-segment-background-hover: rgba(255, 255, 255, 0.04);
  }

  /* iOS Segment */
  .ios .themed {
    --ion-toolbar-segment-background: rgba(255, 255, 255, 0.065);
    --ion-toolbar-segment-color: #ffffff;
    --ion-toolbar-segment-color-checked: #3880ff;
  }

  /*
   * Custom Active Segment (Active, Inactive, Disabled)
   */
  .custom-active {
    --background: papayawhip;

    --color: purple;
    --color-disabled: rgba(0, 0, 0, 0.3);
  }

  .ios .custom-active {
    --color-checked: papayawhip;
    --indicator-color: navy;
  }

  .md .custom-active {
    --color-checked: navy;
    --indicator-color: navy;
  }

  /*
   * Custom Icon Segment (Facebook, Instagram, Slack)
   */
  .custom-icon ion-icon {
    font-size: 44px;
  }

  /*
   * MD Custom Icon Segment (Facebook, Instagram, Slack)
   */
  .md .segment-button-facebook {
    --background-hover: rgb(58, 61, 70, .04);
    --color-checked: #3a3d46;
    --indicator-color: #3a3d46;
  }

  .md .segment-button-instagram {
    --background-hover: rgb(228, 64, 95, .04);
    --color-checked: #e4405f;
    --indicator-color: #e4405f;
  }

  .md .segment-button-slack {
    --background-hover: rgb(58, 175, 133, .04);
    --color-checked: #3aaf85;
    --indicator-color: #3aaf85;
  }

  /*
   * iOS Custom Icon Segment (Facebook, Instagram, Slack)
   */
  .ios .segment-button-facebook {
    --color: #3a3d46;
    --color-checked: #ffffff;
    --indicator-color: #3a3d46;
  }

  .ios .segment-button-instagram {
    --color: #e4405f;
    --color-checked: #ffffff;
    --indicator-color: #e4405f;
  }

  .ios .segment-button-slack {
    --color: #3aaf85;
    --color-checked: #ffffff;
    --indicator-color: #3aaf85;
  }

  /* This CSS should not apply */
  .custom-color {
    --background: purple;
    --color: blue;
  }

  .custom-states-color {
    --color: red;
    --color-disabled: blue;
    --color-checked: indigo;
    --color-hover: orange;
  }

  .custom-states-background ion-segment-button {
    --indicator-color: transparent;
    --indicator-box-shadow: none;
    --color: white;

    --background: red;
    --background-disabled: blue;
    --background-checked: indigo;
    --background-hover: orange;
  }

  .custom-states-background ion-segment-button:hover {
    opacity: 1;
  }

</style>

</html>
